<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                var connection = new WebSocket("ws://localhost:8765/");
                console.log("start");
                connection.onopen = function(){
                    connection.send("pls send me data");
                };

                connection.onmessage = function(event){
                    var received_data = event.data || Window.event.data;
                    draw(received_data);
                    // connection.close();
                };

                connection.onclose = function(event){
                    console.log("websocket close");
                };

                connection.onerror = function(event){
                    console.error("Websocket error observed:", event);
                };
            }
        </script>
    </head>
    <body>
        <canvas id = "defectmap" width = "550" height = "550" style="background-color:white;"></canvas>
        <script>
                function draw(mydata){
                    raw_data = JSON.parse(mydata);
                    for(var item in raw_data){
                        var sampling_coord = JSON.parse(raw_data['sampling_coord']);
                        var defect_coord = JSON.parse(raw_data['defect_coord']);
                        var sampling_edge = raw_data['sampling_edge'];
                        var die_pitch_x = raw_data['die_pitch_x'];
                        var die_pitch_y = raw_data['die_pitch_y'];
                        var wafer_id = raw_data['waferID'];
                        var recipe_id = raw_data['Recipe'];
                        var lotid = raw_data['lotid'];
                        var tool_id = raw_data['Tool_ID'];
                    }

                    canvas = document.getElementById("defectmap");
                    var map = canvas.getContext("2d");

                    map.translate(0, 0);
                    map.lineWidth = 0.05;


                    // map.beginPath();
                    // map.arc(100, 100, 100, -Math.PI, Math.PI, false);
                    // map.closePath();
                    // map.stroke();

                    for (var item in Object.values(sampling_coord)){
                        // console.log(typeof(sampling_coord[item]));
                        var index_defy = parseInt(sampling_edge['def_yl'])+1  - parseInt(sampling_coord[item]['y']);
                        var index_defx = Math.abs(parseInt(sampling_edge['def_xl']))+1  + parseInt(sampling_coord[item]['x']);
                        //1 piexl = 352.73 um,convert to pixel from um for width and height
                        x_pixel = parseFloat(die_pitch_x)/352.73;
                        y_pixel = parseFloat(die_pitch_y)/352.73;
                        //draw die pitch
                        map.strokeRect(index_defx * x_pixel, index_defy * y_pixel, x_pixel, y_pixel);
                        map.save();
                        //draw defect point
                        //x intra die defect position relative to the lower left corner of the die. For this
                        //to be meaningful, XINDEX and YINDEX fields must be used. The corresponding
                        //field in the DefectList will be a Float.
                        for(var item_defect in Object.values(defect_coord)){
                            if(defect_coord[item_defect]['XINDEX'] == sampling_coord[item]['x'] && defect_coord[item_defect]['YINDEX'] == sampling_coord[item]['y']){
                                map.strokeStyle  = "#FF0000";
                                map.lineWidth = 2
                                map.strokeRect(index_defx * x_pixel + parseFloat(defect_coord[item_defect]['XREL'])/352.73, index_defy * y_pixel + y_pixel - parseFloat(defect_coord[item_defect]['YREL'])/352.73, 0.03, 0.02);
                                map.restore();
                            }
                        }
    
                        // x size = 9.440000 um 0.03
                        // y size = 7.280000 um 0.02
                        // XREL = 1.7531200000e+03  4.96 pixel
                        // YREL = 5.0608000000e+02  1.434 pixel
                        //map.strokeRect(4.96, 1.43, 0.03, 0.02);
                        //map.restore();
                    }

                    var map_image = new Image();
                    map_image.src =  canvas.toDataURL("image/png");
                    var map_link = document.createElement("a");
                    map_link.src = map_image;
                    map_link.href = map_image.src;
                    map_link.download = lotid + "-" + tool_id + "-" + recipe_id +"-"+ wafer_id;
                    map_link.click();
                    map.clearRect(0, 0, 550, 550);
                }
        </script>
    </body>
</html>